<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Canvas</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.canvas.js"></script>
	<script type="text/javascript">
	<!--//
		$(function(){
			$("canvas").canvas({
				cross:	true,
				width:	500,
				height:	400,
				rightClick: false
			});

			// Creating container
			var box = $("canvas").canvasBox({
				'top':		10,
				'left':		10,
				'width': 	400,
				'height':	70,
				'clip':		true
			});

			// Just a test, moving a container
			setTimeout(function(){
				box[0].box.top = 40;
				$.canvasDraw();
			}, 500);

			var r = $.canvasLine(box, {
				x1: 30,
				y1: 30,
				x2: 30,
				y2: 200,
				color:	"#5c3566",
				width:	10,
				cap:	'round'
			});
			
			$.canvasText(box, {
				value:		"jQanvas",
				style:		"normal 72px Arial",
				baseline:	"middle",
				left:		200,
				top:		49
			});

			$.canvasShape(box, {
				left:		48.5,
				top:		48.5,
				strokeWidth: 1,
				join:		'round'
			});
			$.canvasDraw($("canvas"));
		});
	//-->
	</script>
	<style type="text/css">
		body
		{
			background: silver;
			text-align:	center;
		}

		canvas
		{
			border:		2px solid brown;
			cursor:		none;
		}
	</style>
</head>

<body>
	<canvas id="canvas" width="200" height="250"></canvas>
	<pre id="debug"></pre>
</body>
</html>
